<#if !parameters.fieldGroup?exists>
	<#include "/${parameters.templateDir}/${parameters.theme}/controlheader.ftl" />
</#if>	
	<#if parameters.labels?exists>
		<div class="multiselectDiv multiselectDiv0">
			<label class="label"<#t/>
			<#if parameters.id?exists>
		        for="${parameters.id?html}"<#t/>
			</#if>
		    ><#t/>
			<#if parameters.required?default(false) && parameters.requiredposition?default("right") != 'right'>
		        <span class="required">*</span><#t/>
			</#if>
			${parameters.labels[0]?html}<#t/>
			<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
		 		<span class="required">*</span><#t/>
			</#if>
			:<#t/>
			</label><#t/>
		</div>
	</#if>
	<#include "/${parameters.templateDir}/geni/mySelect.ftl" />
	<#setting number_format="#.#####">
	<#assign i = 0/>
	<#list parameters.names as name>
		<#if i != 0>
			<div class="multiselectDiv multiselectDiv${i}">
			<#if parameters.labels?exists>
				<label class="label"<#t/>
				<#if parameters.id?exists>
			        for="${parameters.id?html}"<#t/>
				</#if>
			    ><#t/>
				<#if parameters.required?default(false) && parameters.requiredposition?default("right") != 'right'>
			        <span class="required">*</span><#t/>
				</#if>
				${parameters.labels[i]?html}<#t/>
				<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
			 		<span class="required">*</span><#t/>
				</#if>
				:<#t/>
				</label><#t/>
			</#if>
			</div>
			<div class="select-style select-style${i}">
			<div>
			
			<select<#rt/>
			 name="${name?default("")?html}"<#rt/>
			
			<#if parameters.disabled?default(false)>
			 disabled="disabled"<#rt/>
			</#if>
			<#if parameters.get("size")?exists>
			 size="${parameters.get("size")?html}"<#rt/>
			</#if>
			<#if parameters.tabindex?exists>
			 tabindex="${parameters.tabindex?html}"<#rt/>
			</#if>
			<#if parameters.id?exists>
			 id="${name?default("")?html}"<#rt/>
			</#if>
			<#if parameters.cssClass?exists>
			 class="${parameters.cssClass?html}"<#rt/>
			</#if>
			<#if parameters.cssStyle?exists>
			 style="${parameters.cssStyle?html}"<#rt/>
			</#if>
			>
			<#if parameters.allValues?exists && parameters.allValues[i]?exists>
			 value="${parameters.allValues[i]}"<#rt/>
			 <option value="${parameters.allValues[i]}">${parameters.allValues[i]}</option><#rt/>
			<#else>
			 <option value="${name}">${name}</option><#rt/>
			</#if>
			</select>
			</div>
			</div>
		</#if>
		<#assign i = i + 1/>
	</#list>
<#if parameters.fieldGroup?exists>
	<#include "/${parameters.templateDir}/geni/controlfooter.ftl" />
</#if>
<script>
	if(multiselect == undefined){
		var multiselect = {};
	}
	multiselect.firstSelectId = "${parameters.id?html}";
	multiselect.ids = [];
	if($(multiselect.firstSelectId)){
		multiselect.oldOnchange = $(multiselect.firstSelectId).onchange;
	}
	<#list parameters.names as name>
		multiselect.ids.push("${name}");
	</#list>
	
	multiselect.urls = [];
	<#list parameters.urls as url>
		multiselect.urls.push("${url}");
	</#list>
	
	multiselect.allValues = [];
	<#if parameters.allValues?exists>
		<#list parameters.allValues as value>
			multiselect.allValues.push("${value}");
		</#list>
	</#if>
	multiselect.init = function(){
		for(var i=0; i<multiselect.ids.length; i++){
			$(multiselect.ids[i]).onchange = multiselect.onchange.bind(this, i);
		}
		multiselect.resetValue(0);
	}
	multiselect.resetValue = function(index){
		var t = $(multiselect.ids[index]);
		if(t){
			t.value = multiselect.allValues[index];
			if(t.value != multiselect.allValues[index]){
				multiselect.setSelectValue(t, multiselect.allValues[index]);
			}
			multiselect.change(index, multiselect.resetValue.bind(this, index + 1));
		}
	}
	multiselect.setSelectValue = function(select, value){
		select.value = value;
		if(select.value != value){
			setTimeout(multiselect.setSelectValue.bind(this, select, value), 12);
		}
	}
	multiselect.change = function(index, afterChange){
		if(index == 0){
			if(multiselect.oldOnchange){
				multiselect.oldOnchange();
			}
		}
		if(index < multiselect.ids.length - 1){
			var keyword = $(multiselect.ids[index]).value;
			multiselect.getOptions(index, keyword, afterChange);
		}
	}
	multiselect.onchange = function(index){
		multiselect.change(index);
	}
	multiselect.getOptions = function(index, keyword, afterChange){
		if(afterChange == undefined){
			afterChange = Prototype.emptyFunction;
		}
		var url = multiselect.urls[index];
		jQuery.post(
			url,
			{"keyword":keyword},
			function(dataFromServer){
				var dataFromServer = eval("(" + dataFromServer + ")");
				var maps = dataFromServer[4].maps;
				var select = $(multiselect.ids[index + 1]);
				select.innerHTML = "";
				for(p in maps){
					var option = document.createElement("option");
					option.value= p;
					option.innerHTML = maps[p];
					select.appendChild(option);
				}
				if(index < multiselect.ids.length - 2){
					multiselect.change(index + 1, afterChange);
				}else{
					afterChange();
				}
			}
		)
	}
	
	multiselect.init();
</script>
	
